<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户充值下单系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- 自动查找引入进来的工具类脚本。 -->
	<link rel="stylesheet" href="./layui/css/layui.css"  media="all">
</head>
<body>
<!-- 抬头 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	<legend>用户充值下单系统</legend>
</fieldset>
<!-- 用户信息栏 -->
<ul class="layui-nav">
<li class="layui-nav-item" lay-unselect="">
	<!-- <a href="javascript:;">当前账号
		<img src="//t.cn/RCzsdCq" class="layui-nav-img"></img>
	</a> -->
	<label class="layui-form-label" style="padding:7.5px 0px;">当前账号</label>
	<label class="layui-form-label" id='userID' style="padding:7.5px 0px;"></label>
</li>
<li class="layui-nav-item" lay-unselect="">
	<a href="javascript:void(0)" onclick="gotoApplyForRefund();" target='topFrame'>[退款申请]</a>
</li>
<li class="layui-nav-item" lay-unselect="">
	<a href="javascript:void(1)" onclick="gotoOrderRecord();" target='topFrame'>[订单记录]</a>
</li>
</ul>
<!-- 充值栏 -->
<form onsubmit="return false;" class="layui-form layui-form-pane" action="" lay-filter="example">
	<!-- 充值内容栏 -->
	<div class="layui-form-item">
	<label class="layui-form-label">充值内容</label>
	<div class="layui-input-block">
		<input type="radio" name="Recharge" value="金币" title="金币充值" checked>
		<input type="radio" name="Recharge" value="钻石" title="钻石充值">
	</div>
	</div>
	<!-- 用户姓名栏 -->
	<div class="layui-form-item">
	<label class="layui-form-label">用户姓名</label>
	<div class="layui-input-block">
		<input type="text" name="userName" lay-verify="required" 
		placeholder="请填写正确姓名确保到账" autocomplete="off" class="layui-input">
	</div>
	</div>
	<!-- 存入金额 -->
	<div class="layui-form-item">
	<label class="layui-form-label">存入金额</label>
	<div class="layui-input-block">
		<select type="select" name="money" lay-verify="required">
		<option value=""></option>
		<option value="1">￥10</option>
		<option value="2">￥100</option>
		<option value="3">￥500</option>
		<option value="4">￥1000</option>
		<option value="5">￥5000</option>
		<option value="6">￥10000</option>
		<option value="7">￥20000</option>
		<option value="8">￥50000</option>
		</select>
	</div>
	</div>
	<!-- 显示金币或者钻石 -->
	<div class="layui-form-item">
	<label class="layui-form-label" style="padding:7.5px 0px;">金币or钻石金额</label>
	<!-- <label class="layui-form-mid layui-word-aux" type="view" name="view">asdas</label> -->
	<label class="layui-form-label" id='test' style="padding:7.5px 0px;"></label>
	</div>
	<!-- 二级密码输入 -->
	<div class="layui-form-item">
	<label class="layui-form-label">密码框</label>
	<div class="layui-input-inline">
		<input type="password" name="password" lay-verify="required" placeholder="请输入二级密码" autocomplete="off" class="layui-input">
	</div>
	<div class="layui-form-mid layui-word-aux">非游戏密码</div>
	</div>
	<!-- 提交和重置 -->
	<div class="layui-form-item">
	<div class="layui-input-block">
		<button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</div>
	</div>
</form>
<!-- 分割线 -->
<hr class="layui-bg-orange">

<!-- 自动查找引入进来的工具类脚本。 -->
<script src="./layui/layui.js" charset="utf-8"></script>

<script>
var ws = new WebSocket("ws://192.168.1.116:8080");
// 连接成功
ws.onopen = function (e) {
	console.log('连接成功获取到的上半段脚本定义的用户id和客服id=',selfid);
	ws.send(JSON.stringify({
		type: 'REGISTER', 	// 随便定义，用于在服务端区分消息类型
		selfid: selfid,		// 写入自身id
	})); 
}
// 连接关闭
// ws.onclose = function (e) {
// 	console.log('连接关闭');
// }

layui.config({
	version: true
}).use(['form','layer','layedit','jquery','mobile'], function(){
	var mobile = layui.mobile;
		form = layui.form,
        layer = layui.layer,
        layedit = layui.layedit,
		$= layui.jquery;
	
	var _radioVal = '金币';
	var _viewNum = 0;
	var _multiple = 1;
	document.getElementById('userID').innerHTML = selfid;
    //创建一个编辑器
	var editIndex = layedit.build('LAY_demo_editor');
	//自定义验证规则
    form.verify({
        title: function(value){
            if(value.length < 5){
                return '账号至少得5个字符啊';
            }
        },
        pass: [
            /^[\S]{6,12}$/
            ,'密码必须6到12位，且不能出现空格'
        ],
        content: function(value){
            layedit.sync(editIndex);
        }
	});
	// 侦听单选框事件(充值内容栏)
	form.on('radio',function(data){
		// console.log(data.elem,'得到radio原始DOM对象');
		// console.log(data.value,'被点击的radio的value值');
		if(data.value == '金币'){
			_radioVal = '金币';
			_multiple = 1;
			console.log(_radioVal,_viewNum,'点击了金币');
		}else if (data.value == '钻石') {
			_radioVal = '钻石';
			_multiple = 10;
			console.log(_radioVal,_viewNum,'点击了钻石');
		}
		document.getElementById('test').innerHTML = _viewNum * _multiple + _radioVal;
	});
	// 侦听联动选择框事件(存入金额内容)
	form.on('select', function(data){
		if(data.value == 1) {
			_viewNum = 10;
		}else if(data.value == 2) {
			_viewNum = 100;
		}else if(data.value == 3) {
			_viewNum = 500;
		}else if(data.value == 4) {
			_viewNum = 1000;
		}else if(data.value == 5) {
			_viewNum = 5000;
		}else if(data.value == 6) {
			_viewNum = 10000;
		}else if(data.value == 7) {
			_viewNum = 20000;
		}else if(data.value == 8) {
			_viewNum = 50000;
		}
		console.log(data.value,_radioVal,_viewNum,'选择框的内容');
		// content: '<div><table id="testTable"></table></div>',
		document.getElementById('test').innerHTML = _viewNum * _multiple + _radioVal;
	});
    // 监听提交
    form.on('submit(formDemo)', function(data){
		data.field.id = selfid.toString();
		data.field.money = _viewNum.toString();
		data.field.radioVal = _radioVal.toString();
		console.log("返回的结果是啥啊",data.field);
		$.post("/passwordCheck",data.field,function(result){
            if(result.status == "fail"){
                layer.alert(JSON.stringify(result.msg),{
					skin: 'layui-layer-molv',
					closeBtn: 0
				},function(){
                    window.parent.location.reload();    // 刷新父类页面
                    parent.layer.close(index);          // 关闭当前的弹窗
                });
                console.log("密码错误",result);
            }else {
				// var neirong = {
				// 	"用户ID"	: data.field.id,
				// 	"用户姓名"	: data.field.userName,
				// 	"充值内容"	: data.field.Recharge,
				// 	"存入金额"	: data.field.money,
				// }
                // layer.alert(JSON.stringify(neirong),{
				// 	skin: 'layui-layer-molv',
				// 	closeBtn: 0,
				// 	yes:function(){
				//     	layer.msg("要去找客服");
				//   	}
				// });
                console.log("密码正确",result);
				layer.open({
					content: "用户ID："+data.field.id+
							"<br>用户姓名："+data.field.userName+
							"<br>业务类型"+data.field.Recharge+
							"<br>订单金额"+data.field.money+
							"<br>下单时间"+result.time,
					shade:[0.8, '#393D49'],
					closeBtn: 0,
					yes:function(){
				    	layer.msg("要去找客服");
				  	}
				}); 
            }
        })
        return false;
	});
});
function gotoApplyForRefund(){
	console.log('点击退款申请')
	location.href="/?selfid="+selfid+"&val=applyForRefund";
}
function gotoOrderRecord(){
	console.log('点击订单记录')
	location.href="/?selfid="+selfid+"&val=orderRecord";
}
</script>
</body>
</html>
